<script lang="ts">
import Vue from 'vue'
import NavBar from "@/components/nav-bar/nav-bar.vue";
import {getPrinterObj, getPrinters} from "@/services/store/printer";
import {mapState} from "vuex";
import {StoreItem} from "@/types/store-list";

export default Vue.extend({
  name: "select_store",
  components: {NavBar},
  data() {
    return {
      storeList: [] as StoreItem[],
      loading: false,
      hasMore: false
    }
  },
  onLoad() {
    this.getPrinterDataList()
  },
  computed: {
    ...mapState(['machine', 'location']),
    lang(): any {
      return this.$t('selectStore');
    }
  },
  methods: {
    onStore(printerId: number) {
      this.getPrinterObject(printerId)
      uni.switchTab({url: '/pages/index/index'})
    },
    // 更新打印机信息
    async getPrinterObject(printerId: number) {
      const res = await getPrinterObj(printerId)
      if (res.code === 200) {
        console.log(res)
        const {store, machine, printer} = res.data
        this.$store.commit('setSettings')
        this.$store.commit('setPrinter', printer)
        this.$store.commit('setStore', store)
        this.$store.commit('setMachine', machine)
        this.$store.commit("setMachineOnline")
      }
    },
    // 获取打印机列表
    async getPrinterDataList() {
      const {latitude, longitude} = this.location;
      const resStore = await getPrinters(latitude, longitude)
      const {code, msg, data} = resStore
      if (code === 200) {
        this.storeList = data
      } else {
        console.log(resStore)
      }
    },
    // 定位format
    getFormatNavigation(value: number): string {
      return value.toFixed(1) + 'km'
    },
    // 点击定位是
    openStoreLocation(index: number) {
      const {printer_latitude, printer_longitude, store_name, store_address} = this.storeList[index];
      uni.openLocation({
        latitude: printer_latitude,
        longitude: printer_longitude,
        name: store_name,
        address: store_address,
        success: () => console.log('success')
      });
    },
  }
})
</script>

<template>
  <view>
    <nav-bar :page-title="lang.pageName"/>
    <view :class="['margin-20', locale]">
      <template v-if="storeList.length >= 1">
        <view class="radio-20 padding-30 text-32 bg-white gap-20 flex-column">

          <view v-for="(item, index) in storeList" :key="index" @click="onStore(item.printer_id)">
            <view class="flex-between" style="margin-bottom: 10rpx">
              <view class="flex-center gap-30">
                <!-- 照片-->
                <view class="image-box">
                  <!--              <view class="image-label">{{ lang[machine.online === 1 ? 'open' : 'notOpen'] }}</view>-->
                  <image class="radio-20 store-image" :src="item.store_logo || '/static/img/no_store.jpg'"/>
                </view>

                <!-- 商家名和地址-->
                <view class="flex-column gap-20">
                  <view class="text-36" style="line-height: normal">{{ item.printer_name || item.store_name }}</view>
                  <view class="text-28 color-grey">{{ item.store_address }}</view>

                  <!-- 商家支持-->
                  <view class="flex-center wrap gap-20">
                    <view
                        class="store-label" v-for="(canItem, index) in item.printer_paper_types_supported" :key="index">
                      {{ canItem }}
                    </view>
                    <view v-if="item.printer_supports_color" class="store-label">{{ lang.color }}</view>
                    <view v-if="item.printer_supports_double_side" class="store-label">{{ lang.double }}</view>
                  </view>
                </view>
              </view>

              <!-- 导航 -->
              <view :class="['column-center zh-CN gap-8 navigation-box']"
                    style="color: #00C777;align-self: flex-end;" @click.stop="openStoreLocation(index)">
                <image src="/static/icon/home/navigation.svg" style="width: 40rpx;height: 40rpx"/>
                <view>{{ getFormatNavigation(item.distance) }}</view>
              </view>
            </view>
          </view>
        </view>

        <!-- 底部提示-->
        <view class="margin-top-40 color-grey text-32 safe-area-padding" style="width: 100%;">
          <view v-if="loading" class="center gap-20">
            <u-loading-icon/>
            <view>{{ otherLang.loading }}</view>
          </view>
          <view v-if="!loading && !hasMore" class="flex-between">
            <view class="line-weight-30"/>
            <view>{{ otherLang.no_more }}</view>
            <view class="line-weight-30"/>
          </view>
        </view>
      </template>


      <view v-if="storeList.length <= 0" class="center" style="height: 60vh;">
        <u-empty
            mode="data"
            :width="240"
            :hidden="240"
            :textSize="22"
            :text="lang.emptyData"
            icon="http://cdn.uviewui.com/uview/empty/data.png"
        />
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.store-label {
  padding: 2px 6px;
  border-radius: 14rpx;
  border: 1rpx solid #5493fb;
  color: #0186FF;
  font-size: 24rpx;
  font-weight: 300;
}

.image-box {
  position: relative;

  .image-label {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    font-size: 16rpx;
    background: #00bcd4;
    padding: 6rpx 18rpx;
    border-radius: 14rpx 0;
    background: rgba(1, 106, 255, 0.82);
  }

  .store-image {
    width: 160rpx;
    height: 160rpx;
  }
}

.navigation-box {
  padding: 10rpx 16rpx 10rpx 16rpx;
  background: rgba(239, 255, 249, 0.70);
  border-radius: 10rpx;
}
</style>